<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-11-16 15:48:34
 * @Descripttion: 
-->
<template>
  <div>
    <el-form
      :model="searchForm"
      ref="searchFormRef"
      label-width="130px"
      :inline="true"
      size="small"
    >
      <el-form-item label="订单编号：">
        <el-input v-model="searchForm.a"></el-input>
      </el-form-item>
      <el-form-item label="下单日期：">
        <el-date-picker
          v-model="searchForm.b"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="searchForm.c"></el-input>
      </el-form-item>
      <el-form-item label="用户编号：">
        <el-input v-model="searchForm.d"></el-input>
      </el-form-item>
      <el-form-item label="收货地址：">
        <el-select v-model="searchForm.e" placeholder="请选择">
          <el-option label="shanghai" value="shanghai"></el-option>
          <el-option label="beijing" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式：">
        <el-select v-model="searchForm.f" placeholder="请选择">
          <el-option label="微信" value="微信"></el-option>
          <el-option label="支付宝" value="支付宝"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发货日期：">
        <el-date-picker
          v-model="searchForm.g"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="时间段：">
        <el-select v-model="searchForm.h" placeholder="请选择">
          <el-option label="三个月内" value="三个月内"></el-option>
          <el-option label="六个月内" value="六个月内"></el-option>
          <el-option label="九个月内" value="九个月内"></el-option>
          <el-option label="十二个月内" value="十二个月内"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Excel表格：">
        <el-select v-model="searchForm.i" placeholder="请选择">
          <el-option label="通用" value="通用"></el-option>
          <el-option label="不通用" value="不通用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="完成时间：">
        <el-time-select
          v-model="searchForm.j"
          :picker-options="{
    start: '00:00',
    step: '00:15',
    end: '24:00'
  }"
          placeholder="选择时间"
        ></el-time-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
        <el-button icon="el-icon-delete">重置</el-button>
      </el-form-item>
    </el-form>
    <avue-crud
      ref="crud"
      :option="tableOption"
      :data="list"
      :page="page"
      v-model="form"
      :table-loading="listLoading"
      @on-load="getList"
      @size-change="sizeChange"
      @current-change="currentChange"
      :span-method="objectSpanMethod"
    >
      <template slot="menuLeft">
        <el-button
          v-if="order_btn_dao"
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="handleDao()"
        >导出</el-button>
      </template>
      <template slot="menu" slot-scope>
        <el-button v-if="order_btn_fahuo" type="text" size="small">发货</el-button>
        <el-button
          v-if="order_btn_view"
          type="text"
          size="small"
          icon="el-icon-view"
          @click="handleView()"
        >查看详情</el-button>
      </template>
    </avue-crud>
    <el-dialog
      :visible.sync="dialogOrderDetailVisible"
      title="订单详情 "
      width="70%"
      @close="OrderDetailItemVisible"
    >
      <order-detail />
    </el-dialog>
  </div>
</template>

<script>
import { tableOption } from "@/const/crud/deal/order";

import OrderDetail from "./OrderDetail";
export default {
  name: "AllOrder",
  components: {
    OrderDetail,
  },
  data() {
    return {
      order_btn_dao: true,
      order_btn_fahuo: true,
      order_btn_view: true,

      tableOption: tableOption,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      list: [{}],
      listLoading: false,
      form: {},
      searchForm: {},
      dialogOrderDetailVisible: false,

      spanArr: [],
      position: 0,
    };
  },
  methods: {
    getList() {
      this.list = [
        {
          a: 1,
          type: 1,
          b: "111111111",
          c: "2020-03-04 12:23",
          d: "2222",
          e: "333",
          f: "非要健康",
          h: 111,
          g: 111,
        },
        {
          a: 1,
          type: 1,
          b: "111111111",
          c: "2020-03-04 12:23",
          d: "2222",
          e: "333",
          f: "非要健康",
          h: 111,
          g: 111,
        },
        {
          a: 1,
          type: 1,
          b: "111111111",
          c: "2020-03-04 12:23",
          d: "2222",
          e: "333",
          f: "非要健康",
          h: 111,
          g: 111,
        },
        {
          a: 1,
          type: 2,
          b: "2222222222222",
          c: "2020-03-04 12:23",
          d: "2222",
          e: "333",
          f: "非要健康",
          h: 111,
          g: 111,
        },
        {
          a: 1,
          type: 1,
          b: "111111111",
          c: "2020-03-04 12:23",
          d: "2222",
          e: "333",
          f: "非要健康",
          h: 111,
          g: 111,
        },
      ];
      this.dealData();
    },
    dealData() {
      this.list.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (this.list[index].b === this.list[index - 1].b) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //表格合并行
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(rowIndex, _row, _col);
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      //   if (columnIndex === 3) {
      //     const _row = this.spanArr[rowIndex];
      //     const _col = _row > 0 ? 1 : 0;
      //     return {
      //       rowspan: _row,
      //       colspan: _col,
      //     };
      //   }
      //   if (columnIndex === 5) {
      //     const _row = this.spanArr[rowIndex];
      //     const _col = _row > 0 ? 1 : 0;
      //     return {
      //       rowspan: _row,
      //       colspan: _col,
      //     };
      //   }
      //   if (columnIndex === 6) {
      //     const _row = this.spanArr[rowIndex];
      //     const _col = _row > 0 ? 1 : 0;
      //     return {
      //       rowspan: _row,
      //       colspan: _col,
      //     };
      //   }
    },

    searchChange() {
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    handleDao() {},
    //弹出框
    handleView() {
      this.dialogOrderDetailVisible = true;
    },
    OrderDetailItemVisible() {
      this.dialogOrderDetailVisible = false;
    },

    //  spanMethod1({ row, column, rowIndex, columnIndex }) {
    //     if (rowIndex % 2 === 0) {
    //       if (columnIndex === 0) {
    //         return [3, 7]
    //       } else if (columnIndex === 1) {
    //         return [0, 0]
    //       }
    //     }
    //   }
  },
};
</script>

<style lang="scss" scoped>
</style>